<script setup lang="ts">
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const isCollapse = ref<Boolean>(true)
</script>

<template>
    <div class="container">
        <el-menu
                default-active="1"
                :router="true"
                :collapse="isCollapse"
                class="el-menu-vertical-demo">
            <el-menu-item index="1" route="/home/chat/index">
                <el-icon>
                    <icon-menu/>
                </el-icon>
                <span>
              消息管理
            </span>
            </el-menu-item>
            <el-menu-item index="2" route="/home/chat/userInfo">
                <el-icon>
                    <document/>
                </el-icon>
                <span>
               好友管理
            </span>
            </el-menu-item>
        </el-menu>

    </div>
</template>

<style scoped lang="scss">
.container {
  overflow: hidden;
  width: 100%;
  background-color: #e0e0df;
}

.el-menu-vertical-demo {

  height: 100%;
  min-height: calc(100vh - 120px);
  background-color: #e0e0df;
  display: flex;
  width: 100%;
  flex-direction: column;
}

.bar-ul li {
  width: 100%;
  height: 100px;
  background-color: #FF9900;
}
</style>